<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 父组件通过属性的形式向子组件传值 -->
        <!-- count与:count的区别，加冒号父组件传给子组件的是数字，不叫冒号传递的是字符串 -->
        <counter :count="2" @inc="handleIncrease"></counter>
        <counter :count="3" @inc="handleIncrease"></counter>
        {{total}}
    </div>

    <script>
        // 1.先定义一个局部子组件
        var counter = {
            props: ["count"],
            data() {
                return {
                    number: this.count
                }
            },
            // template: "<div @click='handleClick'>{{count}}</div>",
            template: "<div @click='handleClick'>{{number}}</div>",
            methods: {
                handleClick: function () {
                    // this.count++  虽然在子组件直接操作父组件传递过来的值也能够实现自增的效果，
                    // 但是子组件只能用这个内容而不能修改这个内容，这就是VUE中的单向数据流的概念

                    // 解决方法：在子组件定义一个number，复制接收到的count的值，在插值表达式里使用number代替count
                    this.number++
                    this.$emit('inc', 1)
                }
            },
        }

        var vm = new Vue({
            el: "#app",
            // 2.再在父组件中注册该子组件
            components: {
                counter: counter
            },
            data: {
                total: 5
            },
            methods: {
                // step就是子组件向父组件通过事件传递的参数，此处为1
                handleIncrease: function (step) {
                    alert(step)
                    this.total += step
                }
            }
        })
    </script>
</body>

</html>